import React, { useState } from 'react';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { Form, Input, DatePicker, Button, message } from 'antd';
import FoldSearchPanle from '@/components/FoldSearchPanle';
export interface SelectProps {
  defaultParams: {};
  onSearch: (values: any) => void;
  children: any;
  // hideSearchForm: any;
}
const SearchForm: React.FC<SelectProps> = (props: SelectProps) => {
  const [fold, setFold] = useState(true);
  const [form] = Form.useForm();
  const search = (values: any) => {
    if (typeof props.onSearch === 'function') {
      props.onSearch(values);
    }
  };
  const handleReset = () => {
    form.resetFields();
    message.success('重置完成');
  };
  const layoutCol = { xl: 4, lg: 6, md: 12, sm: 24 };

  return (
    <Form form={form} initialValues={props.defaultParams} onFinish={search}>
      <FoldSearchPanle fold={fold} lastSpan={12} layoutCol={layoutCol}>
        <Form.Item name="effe" label="生效时间">
          <DatePicker />
        </Form.Item>
        <Form.Item name="vendorNum" label="供应商">
          <Input placeholder="请输入供应商" />
        </Form.Item>
        <Form.Item>
          <span style={{ float: 'right' }}>
            {/* <Button
                        type="link"
                        icon={fold ? <DownOutlined /> : <UpOutlined />}
                        onClick={() => setFold(!fold)}
                    >
                        {fold ? '更多' : '收起'}
                    </Button> */}
            <Button.Group style={{ margin: '0 12px' }}>
              <Button
                type="primary"
                icon={<SearchOutlined />}
                htmlType="submit"
                title="查询"
                style={{ zIndex: 3 }}
              >
                查询
              </Button>
              <Button icon={<ReloadOutlined />} onClick={handleReset} title="重置">
                重置
              </Button>
            </Button.Group>
            {props.children}
          </span>
        </Form.Item>
      </FoldSearchPanle>
    </Form>
  );
};

export default SearchForm;
